<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>下料工位</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet" />
  <link href="css/font-awesome.min.css?v=4.7.0" rel="stylesheet" />
  <!-- bootstrap-table 表格插件样式 -->
  <link href="ajax/libs/bootstrap-table/bootstrap-table.min.css?v=1.22.6" rel="stylesheet" />
  <link href="css/animate.min.css?v=2070831" rel="stylesheet" />
  <link href="css/style.min.css?v=2070831" rel="stylesheet" />
  <link href="ruoyi/css/ry-ui.css?v=4.8.0" rel="stylesheet" />

  <script src="js/jquery.min.js?v=3.6.3"></script>
  <script src="js/bootstrap.min.js?v=3.3.7"></script>
  <!-- bootstrap-table 表格插件 -->
  <script src="ajax/libs/bootstrap-table/bootstrap-table.min.js?v=1.22.6"></script>
  <script src="ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=1.22.6"></script>
  <script src="ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js?v=1.22.6"></script>
  <!-- jquery-validate 表单验证插件 -->
  <script src="ajax/libs/validate/jquery.validate.min.js?v=1.7.0"></script>
  <script src="ajax/libs/validate/jquery.validate.extend.js?v=1.7.0"></script>
  <script src="ajax/libs/validate/messages_zh.js?v=1.7.0"></script>
  <!-- bootstrap-table 表格树插件 -->
  <script src="ajax/libs/bootstrap-table/extensions/tree/bootstrap-table-tree.min.js?v=1.22.6"></script>
  <!-- 遮罩层 -->
  <script src="ajax/libs/blockUI/jquery.blockUI.js?v=2.70.0"></script>
  <script src="ajax/libs/iCheck/icheck.min.js?v=1.0.3"></script>
  <script src="ajax/libs/layer/layer.min.js?v=3.7.0"></script>
  <script src="ajax/libs/layui/layui.min.js?v=2.8.18"></script>
  <script src="ruoyi/js/common.js?v=4.8.0"></script>
  <script src="ruoyi/js/ry-ui.js?v=4.8.0"></script>
</head>

<body>
  <div id="blankin-station">
    <div class="main-con">
      <div class="header">
        <div class="car-mun">
          <div class="content-container">
            <div class="left-top-bar bar"></div>
            <div class="right-top-bar bar"></div>
            <div class="left-bottom-bar bar"></div>
            <div class="right-bottom-bar bar"></div>
            <div class="content">
              <div>当前联动小车数量：</div>
              <span class="num"></span>
              <div class="unit">辆</div>
            </div>
          </div>
        </div>
        <!-- 报警信息 -->
        <div class="tip-wrapper">
          <img src="img/loading/tip.png" class="tip" id="tip" />
          <div class="tip-wrapper-list" id="tip-wrapper-list">
            <img src="img/loading/tip-header.png" class="tip-header" style="width: 100%; height: 80px" />
            <div id="tip-wrapper-list-content" class="tip-wrapper-list-content">
            </div>
          </div>
        </div>
      </div>
      <div class="top">

      </div>
      <div class="bottom">
        <div class="left car1">
          <div class="monitor-wrapper">
            <div class="load-icon normal">
              <span>正常</span>
            </div>
            <div class="monitor-header">
              <div>
                <img src="img/loading/blankin-bg.png" class="structure" />
                <div class="cdz-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">充电桩报警</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="xc-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">小车报警信息</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="dyw-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">低液位报警</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="bz-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">避障报警</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="jt-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">急停信息</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="title-con">
            <span>1 </span>号小车状态
          </div>
          <div class="content-container">
            <div class="line"></div>
            <div class="left-top-bar bar" style="height: 7px"></div>
            <div class="right-top-bar bar" style="height: 7px"></div>
            <div class="left-bottom-bar bar"></div>
            <div class="right-bottom-bar bar"></div>
            <div class="content">
              <div class="left-info">
                <div class="item">
                  <div class="title">
                    运行位置
                  </div>
                  <div class="info">
                    <span class="rgvMovingPosition"></span>m
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    升降高度
                  </div>
                  <div class="info">
                    <span class="rgvLiftingHeight"></span>m
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    充电桩状态
                  </div>
                  <div class="info">
                    <span class="chargingPileStatus"></span>
                  </div>
                </div>
              </div>
              <div class="right-info">
                <div class="item">
                  <div class="common-item">
                    <div class="title">电量情况</div>
                  </div>
                  <div class="count-circle">
                    <img src="img/loading/trans-circle.png" alt="" srcset="">
                    <div class="progress-ring electric-progress" style="--progress: 80;">
                      <div class="progress-ring__content rgvBatteryStatus"></div>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="common-item">
                    <div class="title">液压站温度</div>
                  </div>
                  <div class="count-circle">
                    <img src="img/loading/trans-circle.png" alt="" srcset="">
                    <div class="progress-ring rgvHydraulicStationTemperature-progress" style="--progress: 28;">
                      <div class="progress-ring__content "> <span class="rgvHydraulicStationTemperature"></span> ℃
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="line"></div>
          </div>
        </div>
        <div class="left car2">
          <div class="monitor-wrapper">
            <div class="load-icon normal">
              <span>正常</span>
            </div>
            <div class="monitor-header">
              <div>
                <img src="img/loading/blankin-bg.png" class="structure" />
                <div class="cdz-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">充电桩报警</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="xc-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">小车报警信息</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="dyw-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">低液位报警</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="bz-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">避障报警</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="jt-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">急停信息</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="title-con">
            <span>1 </span>号小车状态
          </div>
          <div class="content-container">
            <div class="line"></div>
            <div class="left-top-bar bar" style="height: 7px"></div>
            <div class="right-top-bar bar" style="height: 7px"></div>
            <div class="left-bottom-bar bar"></div>
            <div class="right-bottom-bar bar"></div>
            <div class="content">
              <div class="left-info">
                <div class="item">
                  <div class="title">
                    运行位置
                  </div>
                  <div class="info">
                    <span class="rgvMovingPosition"></span>m
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    升降高度
                  </div>
                  <div class="info">
                    <span class="rgvLiftingHeight"></span>m
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    充电桩状态
                  </div>
                  <div class="info">
                    <span class="chargingPileStatus"></span>
                  </div>
                </div>
              </div>
              <div class="right-info">
                <div class="item">
                  <div class="common-item">
                    <div class="title">电量情况</div>
                  </div>
                  <div class="count-circle">
                    <img src="img/loading/trans-circle.png" alt="" srcset="">
                    <div class="progress-ring electric-progress" style="--progress: 80;">
                      <div class="progress-ring__content rgvBatteryStatus"></div>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="common-item">
                    <div class="title">液压站温度</div>
                  </div>
                  <div class="count-circle">
                    <img src="img/loading/trans-circle.png" alt="" srcset="">
                    <div class="progress-ring rgvHydraulicStationTemperature-progress" style="--progress: 28;">
                      <div class="progress-ring__content "> <span class="rgvHydraulicStationTemperature"></span> ℃
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="line"></div>
          </div>
        </div>
        <div class="left car3">
          <div class="monitor-wrapper">
            <div class="load-icon normal">
              <span>正常</span>
            </div>
            <div class="monitor-header">
              <div>
                <img src="img/loading/blankin-bg.png" class="structure" />
                <div class="cdz-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">充电桩报警</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="xc-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">小车报警信息</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="dyw-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">低液位报警</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="bz-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">避障报警</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="jt-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">急停信息</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="title-con">
            <span>1 </span>号小车状态
          </div>
          <div class="content-container">
            <div class="line"></div>
            <div class="left-top-bar bar" style="height: 7px"></div>
            <div class="right-top-bar bar" style="height: 7px"></div>
            <div class="left-bottom-bar bar"></div>
            <div class="right-bottom-bar bar"></div>
            <div class="content">
              <div class="left-info">
                <div class="item">
                  <div class="title">
                    运行位置
                  </div>
                  <div class="info">
                    <span class="rgvMovingPosition"></span>m
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    升降高度
                  </div>
                  <div class="info">
                    <span class="rgvLiftingHeight"></span>m
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    充电桩状态
                  </div>
                  <div class="info">
                    <span class="chargingPileStatus"></span>
                  </div>
                </div>
              </div>
              <div class="right-info">
                <div class="item">
                  <div class="common-item">
                    <div class="title">电量情况</div>
                  </div>
                  <div class="count-circle">
                    <img src="img/loading/trans-circle.png" alt="" srcset="">
                    <div class="progress-ring electric-progress" style="--progress: 80;">
                      <div class="progress-ring__content rgvBatteryStatus"></div>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="common-item">
                    <div class="title">液压站温度</div>
                  </div>
                  <div class="count-circle">
                    <img src="img/loading/trans-circle.png" alt="" srcset="">
                    <div class="progress-ring rgvHydraulicStationTemperature-progress" style="--progress: 28;">
                      <div class="progress-ring__content "> <span class="rgvHydraulicStationTemperature"></span> ℃
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="line"></div>
          </div>
        </div>
        <div class="left car4">
          <div class="monitor-wrapper">
            <div class="load-icon normal">
              <span>正常</span>
            </div>
            <div class="monitor-header">
              <div>
                <img src="img/loading/blankin-bg.png" class="structure" />
                <div class="cdz-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">充电桩报警</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="xc-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">小车报警信息</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="dyw-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">低液位报警</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="bz-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">避障报警</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
                <div class="jt-warning warning-box">
                  <div class="warning-content">
                    <div class="warning-title">急停信息</div>
                  </div>
                  <div class="warning-mark">
                    <img src="img/loading/alert.png" alt="" srcset="">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="title-con">
            <span>1 </span>号小车状态
          </div>
          <div class="content-container">
            <div class="line"></div>
            <div class="left-top-bar bar" style="height: 7px"></div>
            <div class="right-top-bar bar" style="height: 7px"></div>
            <div class="left-bottom-bar bar"></div>
            <div class="right-bottom-bar bar"></div>
            <div class="content">
              <div class="left-info">
                <div class="item">
                  <div class="title">
                    运行位置
                  </div>
                  <div class="info">
                    <span class="rgvMovingPosition"></span>m
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    升降高度
                  </div>
                  <div class="info">
                    <span class="rgvLiftingHeight"></span>m
                  </div>
                </div>
                <div class="item">
                  <div class="title">
                    充电桩状态
                  </div>
                  <div class="info">
                    <span class="chargingPileStatus"></span>
                  </div>
                </div>
              </div>
              <div class="right-info">
                <div class="item">
                  <div class="common-item">
                    <div class="title">电量情况</div>
                  </div>
                  <div class="count-circle">
                    <img src="img/loading/trans-circle.png" alt="" srcset="">
                    <div class="progress-ring electric-progress" style="--progress: 80;">
                      <div class="progress-ring__content rgvBatteryStatus"></div>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="common-item">
                    <div class="title">液压站温度</div>
                  </div>
                  <div class="count-circle">
                    <img src="img/loading/trans-circle.png" alt="" srcset="">
                    <div class="progress-ring rgvHydraulicStationTemperature-progress" style="--progress: 28;">
                      <div class="progress-ring__content "> <span class="rgvHydraulicStationTemperature"></span> ℃
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="line"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  </div>
  </div>
</body>

</html>
<script>
  var refleshAlarm = 1500;
  var refleshStatus = 1500;
  $('#tip').click(function (e) {
    e.stopPropagation(); //阻止事件冒泡
    $('#blankin-station #tip-wrapper-list').css('display', 'block');
  });
  $('#blankin-station').click(function (e) {
    if (e.target.classList.contains('tip-wrapper-list-item') || e.target.classList.contains('alarms') || e.target.classList.contains('tip-wrapper-list-content') || e.target.classList.contains('tip-header') || e.target.classList.contains('tip') || e.target.classList.contains('tip-wrapper-list')) return
    $('#blankin-station #tip-wrapper-list').css('display', 'none');
  });
  async function getUnloadingStatusInfo() {
    const data = await new Promise((resolve, reject) => {
      let resStr =
        '{"unloadingStatus":[{"rgvSn":1,"rgvMovingPosition":153.9684,"rgvLiftingHeight":153.9684,"currentLinkedCartCount":76,"rgvWorkingStatus":1,"rgvBatteryStatus":153.9684,"rgvrgvWorkingStatusHydraulicStationTemperature":153.9684,"chargingPileStatus":76},{"rgvSn":2,"rgvMovingPosition":153.9684,"rgvLiftingHeight":153.9684,"currentLinkedCartCount":76,"rgvWorkingStatus":1,"rgvBatteryStatus":153.9684,"rgvHydraulicStationTemperature":153.9684,"chargingPileStatus":76},{"rgvSn":3,"rgvMovingPosition":153.9684,"rgvLiftingHeight":153.9684,"currentLinkedCartCount":76,"rgvWorkingStatus":2,"rgvBatteryStatus":153.9684,"rgvHydraulicStationTemperature":153.9684,"chargingPileStatus":76},{"rgvSn":4,"rgvMovingPosition":153.9684,"rgvLiftingHeight":153.9684,"currentLinkedCartCount":76,"rgvWorkingStatus":0,"rgvBatteryStatus":153.9684,"rgvHydraulicStationTemperature":153.9684,"chargingPileStatus":76}],"updateTime":1742808948636}'; res = JSON.parse(resStr);
      console.log(res.unloadingStatus, 'res');
      res = JSON.parse(resStr);
      console.log($('#blankin-station .num').text(4)); // 勿删 赋值 当前联动小车数量
      (res.unloadingStatus || []).sort((a, b) => a.rgvSn - b.rgvSn).forEach(item => {
        $(`#blankin-station .car${item.rgvSn} .rgvMovingPosition`).text(item.rgvMovingPosition)
        $(`#blankin-station .car${item.rgvSn} .title-con span`).text(item.rgvSn)
        $(`#blankin-station .car${item.rgvSn} .load-icon span`).text(item.rgvWorkingStatus === 0 ? '空载' : item.rgvWorkingStatus === 1 ? '带载' : item.rgvWorkingStatus === 2 ? '充电' : '')
        $(`#blankin-station .car${item.rgvSn} .load-icon`)[0].className = `load-icon ${item.rgvWorkingStatus === 0 ? 'normal' : item.rgvWorkingStatus === 1 ? 'carrying' : item.rgvWorkingStatus === 2 ? 'charge' : ''}`
        $(`#blankin-station .car${item.rgvSn} .rgvLiftingHeight`).text(item.rgvLiftingHeight)
        $(`#blankin-station .car${item.rgvSn} .rgvHydraulicStationTemperature`).text(item.rgvHydraulicStationTemperature)
        $(`#blankin-station .car${item.rgvSn} .chargingPileStatus`).text(item.chargingPileStatus === 0 ? '正常' : item.chargingPileStatus === 1 ? '异常' : '')
        $(`#blankin-station .car${item.rgvSn} .rgvBatteryStatus`).text(item.rgvBatteryStatus === 0 ? '正常' : item.rgvBatteryStatus === 1 ? '异常' : '')
        $(`#blankin-station .car${item.rgvSn} .progress-ring`).css('--progress', 50)
        $(`#blankin-station .car${item.rgvSn} .rgvHydraulicStationTemperature-progress`).css('--progress', item.rgvHydraulicStationTemperature)
      })


      resolve(res)
    })
    return data
  }

  async function getUnloadingAlarmInfo() {
    let str = '';
    $('#blankin-station #tip-wrapper-list-content').html('')
    const data = await new Promise((resolve, reject) => {
      //字符串转json
      resStr =
        '{"updateTime":1742808989155,"unloadingAlarms":[{"component":0,"alarmType":1,"deviceSn":1},{"component":0,"alarmType":1,"deviceSn":2},{"component":0,"alarmType":1,"deviceSn":3},{"component":0,"alarmType":1,"deviceSn":4},{"component":0,"alarmType":2,"deviceSn":1},{"component":0,"alarmType":2,"deviceSn":2},{"component":0,"alarmType":2,"deviceSn":3},{"component":0,"alarmType":2,"deviceSn":4},{"component":0,"alarmType":3,"deviceSn":1},{"component":0,"alarmType":3,"deviceSn":2},{"component":0,"alarmType":3,"deviceSn":3},{"component":0,"alarmType":3,"deviceSn":4},{"component":0,"alarmType":4,"deviceSn":1},{"component":0,"alarmType":5,"deviceSn":1},{"component":0,"alarmType":5,"deviceSn":2},{"component":0,"alarmType":5,"deviceSn":3},{"component":0,"alarmType":5,"deviceSn":4}]}'
      res = JSON.parse(resStr);
      (res.unloadingAlarms || []).sort((a, b) => a.rgvSn - b.rgvSn).forEach(item => {
        if (item.alarmType === 1) {
          $(`.car${item.deviceSn} .dyw-warning`).css('display', 'block')
        }
        if (item.alarmType === 2) {
          $(`.car${item.deviceSn} .bz-warning`).css('display', 'block')
        }
        if (item.alarmType === 3) {
          $(`.car${item.deviceSn} .xc-warning`).css('display', 'block')
        }
        if (item.alarmType === 4) {
          $(`.car${item.deviceSn} .jt-warning`).css('display', 'block')
        }
        if (item.alarmType === 5) {
          $(`.car${item.deviceSn} .cdz-warning`).css('display', 'block')
        }
        str += `<div class="tip-wrapper-list-item alarm1">
								<div style="display: flex; align-items: center" class="alarms">
									<div  class="alarms">${item.alarmType === 4 ? '' : `${item.deviceSn}号`}${transType(item.alarmType)}</div>
								</div>
								<div style="font-size: 14px"  class="alarms">${formatDateTime(res.updateTime)}</div>
							</div>`
      });
      $('#blankin-station #tip-wrapper-list-content').html(str)
      resolve(res)
    })
    return data
  }
  // 初始请求一次
  getInitAllData()
  // 每15秒轮询一次
  // setInterval(getInitAllData, refleshAlarm);
  function getInitAllData() {
    // 清空数据
    $('#blankin-station span').text('')
    $('#blankin-station .warning-box').css('display', 'none');
    $('#blankin-station #tip-wrapper-list-content').html('')
    $('#blankin-station .progress-ring').css('--progress', 0)
    let warningMarks = $('#blankin-station .warning-mark')
    for (let index = 0; index < warningMarks.length; index++) {
      const element = warningMarks[index];
      element.style['animation-delay'] = `${Math.random() * 5}s`
    }
    Promise.all([getUnloadingStatusInfo(), getUnloadingAlarmInfo(),]).then(([
      unloadingStatusInfo, unloadingAlarmInfo,
    ]) => {
      console.log(unloadingStatusInfo, unloadingAlarmInfo, 'all');
      $('#blankin-station .pm-warning').css('display', 'none');
      $('#blankin-station .fddm-warning').css('display', 'none');
    }).catch(err => {
      console.log(err);
    })
  }
  // 转换报警类型
  function transType(params) {
    switch (params) {
      case 1:
        return '小车低液位报警'
        break;
      case 2:
        return '小车避障报警'
        break;
      case 3:
        return '小车报警信息'
        break;
      case 4:
        return '急停信息'
        break;
      case 5:
        return '小车充电桩报警'
        break;

      default:
        return ''
        break;
    }
  }
  function updateProgress(ele, percent, needText) {
    $(`${ele}`)
      .attr('aria-valuenow', percent)
      .css('width', percent + '%')
    if (needText) $(`${ele}`).text(percent + '%');
  }

  function formatDateTime(updateTime) {
    var date = new Date(updateTime);
    var formatted =
      // date.getFullYear() +
      // '-' +
      // String(date.getMonth() + 1).padStart(2, '0') +
      // '-' +
      // String(date.getDate()).padStart(2, '0') +
      // ' ' +
      String(date.getHours()).padStart(2, '0') +
      ':' +
      String(date.getMinutes()).padStart(2, '0') +
      ':' +
      String(date.getSeconds()).padStart(2, '0');

    return formatted;
  }
</script>
<style lang="less">
  #blankin-station {
    display: flex;
    flex-direction: column;
    height: 100%;

    .common-item {
      display: flex;

      .title {
        font-size: 20px;
        color: #ffffff;
      }

      .status {
        font-weight: 600;
        font-size: 24px;
        color: #69d9fe;
        text-align: center;
      }
    }

    .title-con {
      font-weight: 500;
      font-size: 28px;
      color: #ffffff;
      line-height: 50px;
      background: url(img/loading/title-icon-bg.png);
      background-size: 100% 100%;
      height: 59px;
      margin-top: 20px;

      span {
        padding-left: 100px;
      }
    }

    .bar-item {
      justify-content: space-between;
      align-items: center;
      /* margin-bottom: 48px; */
      font-weight: bold;
      font-size: 24px;

      .left {
        display: flex;
        align-items: center;
        flex-direction: row !important;
      }

      .left-bar {
        width: 16px;
        height: 17px;
        border-radius: 2px;
        margin-right: 10px;
      }

      display: flex;

      .title {
        font-size: 20px;
        color: #ffffff;
      }

      .status {
        font-weight: 600;
        font-size: 24px;
        color: #69d9fe;
        text-align: center;
      }
    }

    .content-container {
      /* flex: 1; */
      position: relative;
      display: flex;
      flex-direction: column;
      background: linear-gradient(90deg,
          rgba(52, 203, 237, 0.1) 0%,
          rgba(102, 230, 255, 0.25) 54%,
          rgba(52, 192, 237, 0.1) 100%);
      border: 1px solid rgba(102, 230, 255, 0.25);
      transition: opacity 0.25s ease;

      .line {
        width: 100%;
        height: 7px;
        background: linear-gradient(90deg,
            #0a3c4c 0%,
            rgba(10, 58, 73, 0) 50%,
            #093746 100%);
      }

      .bar {
        width: 5px;
        position: absolute;
        background: #62fff6;
        height: 7px;
      }

      .left-top-bar {
        top: 0;
        left: 0;
      }

      .right-top-bar {
        top: 0;
        right: 0;
      }

      .left-bottom-bar {
        bottom: 0;
        left: 0;
      }

      .right-bottom-bar {
        bottom: 0;
        right: 0;
      }
    }

    .main-con {
      flex: 1;
      background-image: url(img/loading/screen-bg.png);
      background-size: 100% 100%;
      padding: 10px;
      display: flex;
      flex-direction: column;
      padding-bottom: 20px;
      background-repeat: no-repeat;

      .header {
        display: flex;
        justify-content: space-between;

        .car-mun {
          width: 759px;
          max-width: 759px;
          height: 63px;
          min-height: 63px;
          margin-left: 30px;

          .content-container {
            height: 100%;

            .bar {
              height: 2px;
            }

            .content {
              font-size: 28px;
              line-height: 60px;
              color: #FFFFFF;
              padding-left: 20px;
              display: flex;

              div {
                &:first-of-type {
                  padding-right: 30px;
                }
              }
            }
          }
        }
      }

      /* .top {
        width: 100%;
        height: 13%;
        min-height: 13%;
        position: relative;


      } */

      .bottom {
        overflow-y: auto;
        overflow-x: hidden;
        flex-wrap: wrap;
        align-content: flex-start;

        &::-webkit-scrollbar {
          width: 4px;
          height: 4px;
          background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 6px;
          background-color: rgba(144, 147, 153, 0.3);

          &:hover {
            background-color: rgba(144, 147, 153, 0.5);
          }
        }

        .monitor-wrapper {
          /* position: absolute; */
          left: 20px;
          right: 20px;
          top: 0;
          width: 100%;
          bottom: 0;
          z-index: 3;

          .load-icon {
            margin-top: 17px;
            width: 142.24px;
            height: 47px;
            margin-bottom: 10px;
            margin-left: 15px;
            position: relative;
            background: url(img/loading/load-icon-empty.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;

            span {
              font-size: 18px;
              padding-left: 72px;
              line-height: 47px;
            }

            &::after {
              position: absolute;
              content: '';
              right: 10px;
              top: 20%;
              width: 8px;
              height: 8px;
              border-radius: 4px;
            }

            &.normal {
              color: #0EC5F3;

              &::after {
                background: #69D9FE;
              }
            }

            &.carrying {
              color: #6CF0BC;

              &::after {
                background: #69EAB9;
              }
            }

            &.charge {
              color: #F16060;

              &::after {
                background: #F16060;
              }
            }
          }

          .monitor-header {
            display: flex;
            height: 100%;
            width: 100%;



            >div {
              display: flex;
              position: relative;
              flex-direction: column;
              min-width: calc(50% - 45px);
              flex: 1;
              margin-right: 20px;
              margin-left: 15px;



              .structure {
                width: 100%;
                height: 52px;
              }
            }


            .bpq-warning {
              left: 150px;
              top: 35%;
              width: 200px;
              height: 50px;

              .bpq-left {
                position: absolute;

                &::before {
                  content: '';
                  position: absolute;
                  background: #143C8E;
                  border: 1.5px solid rgba(255, 255, 255, 0.95);
                  border-radius: 50%;
                  left: 0;
                  width: 8px;
                  height: 8px;
                }

                &::after {
                  content: '';
                  width: 61px;
                  border: 1px solid #FFFFFF;
                  left: -2px;
                  height: 1px;
                  display: block;
                  top: 27px;
                  position: absolute;
                  transform: rotate(45deg);

                }
              }

              .bpq-right {
                position: absolute;
                left: -2px;
                top: 27px;

                &::before {
                  content: '';
                  width: 90px;
                  border: 1px solid #FFFFFF;
                  left: 52px;
                  height: 1px;
                  display: block;
                  top: 22px;
                  position: absolute;

                }
              }

              .warning-content {
                left: 150px;
                top: 22px;
                position: absolute;
              }

              .warning-mark {
                left: 180px;
                top: 100px;
                position: absolute;
              }
            }

            .cdz-warning {
              left: 10px;
              top: 2%;
            }

            .xc-warning {
              left: 50%;
              bottom: 3%;
            }

            .dyw-warning {
              left: 35%;
              bottom: 35%;
            }

            .bz-warning {
              right: 30px;
              top: -45px;
              transform: translateY(-20%);
            }

            .jt-warning {
              right: 0;
              bottom: 0;
            }

            .warning-box {
              position: absolute;
              width: 126px;

              .warning-content {
                width: 126px;
                height: 41px;
                background: url(img/loading/alert-bg.png);
                background-size: 100% 100%;
                padding-top: 7px;

                .warning-title {
                  font-weight: 600;
                  font-size: 18px;
                  color: rgba(255, 133, 89, 1);
                  text-align: center;
                }

                .warning-text {
                  font-weight: 500;
                  font-size: 16px;
                  text-align: center;
                  color: #FFFFFF;
                }
              }

              .warning-mark {
                width: 30px;
                height: 30px;
                background-size: 100% 100%;
                margin-left: 10px;
                animation: blink 1.5s linear infinite;

                img {
                  width: 100%;
                  height: 100%;
                }

              }

              /* display: none; */
            }



            .tip {
              width: 82px;
              height: 80px;
              margin-top: 12px;
            }
          }

          .monitor-status {
            display: flex;
            margin: 10px 12px;

            &-item {
              width: 32%;
              position: relative;

              &-title {
                font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                font-weight: 500;
                font-size: 14px;
                color: #ffffff;
                text-align: left;
                font-style: normal;
                position: absolute;
                left: 52px;
                top: 2px;
              }

              .timer {
                position: absolute;
                right: 10px;
                bottom: 0px;
                font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                font-weight: 400;
                font-size: 8px;
                color: #ffffff;
                line-height: 22px;
                text-align: left;
                font-style: normal;
              }
            }

            .status-title-img {
              width: 100%;
              height: 30px;
            }
          }

          .monitor-count {
            display: flex;
            margin: 0 12px;

            &-item {
              width: 313px;
              margin-right: 10px;
              position: relative;

              .count-img {
                width: 100%;
                height: 45px;
              }

              &-title {
                font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                font-weight: 500;
                font-size: 13px;
                color: #ffffff;
                line-height: 45px;
                text-align: left;
                font-style: normal;
                display: flex;
                justify-content: space-between;
                position: absolute;
                left: 0;
                right: 0;
                padding: 0 13px;
                top: 0;

                .num {
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  font-size: 18px;
                  color: #69d9fe;
                  text-align: center;
                  font-style: normal;
                  text-transform: none;
                }
              }
            }
          }
        }

        flex: 1;
        display: flex;
        margin-bottom: 10px;
        min-height: calc(100% - 130px);

        >.left {

          &:nth-of-type(1),
          &:nth-of-type(2) {
            margin-bottom: 30px;
          }
        }

        >.left,
        >.right {
          flex: 1;
          display: flex;
          flex-direction: column;
          height: fit-content;
          margin: 10px 20px;
          max-width: calc(50% - 40px);
          min-width: calc(50% - 40px);

          .title-con {
            width: 646px;
            margin-bottom: 10px;
            margin-left: 15px;
          }


          .content {
            flex: 1;
            display: flex;
            padding: 10px 0;
          }

          .content-container {
            margin-left: 40px;
            max-width: calc(100% - 80px);
          }
        }

        .left-info {
          padding-left: 30px;
          width: 50%;

          .item {
            display: flex;
            margin-bottom: 15px;

            .title {
              background: url(img/loading/blankin-text-bg.png);
              width: 127px;
              height: 37px;
              line-height: 37px;
              background-size: 100%;
              background-repeat: no-repeat;
              font-size: 20px;
              color: #FFFFFF;
              padding-left: 10px;
              width: 50%;
            }

            .info {
              font-weight: 600;
              font-size: 21px;
              color: #69D9FE;
              padding-left: 30px;
              line-height: 37px;
            }
          }

          .title-con span {
            padding-left: 100px;
          }

          .status {
            display: flex;
            justify-content: space-around;

            .common-item {
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
          }
        }

        .right-info {
          display: flex;
          width: 50%;

          .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 20px;
          }

          .count-circle {
            background: url(img/loading/trans-circle.png);
            background-size: 100%;
            width: 122px;
            height: 122px;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
              color: #44e1ff;
              font-size: 24px;
            }
          }

          .count-circle {
            position: relative;

            img {
              width: 100%;
              position: absolute;
              z-index: 1;
            }

            background-size: 100%;
            width: 122px;
            height: 122px;
            display: flex;
            align-items: center;
            justify-content: center;

            .progress-ring {
              --size: 78px;
              /* 圆环尺寸 */
              --border: 5px;
              /* 圆环粗细 */
              --color: transparent;
              /* 进度颜色 */
              --bg: #42b983;
              /* 背景颜色 */

              width: var(--size);
              height: var(--size);
              border-radius: 50%;
              background: conic-gradient(var(--color) calc((calc(100 - var(--progress)) * 3.6deg)),
                  var(--bg) 0);
              position: relative;
            }

            .progress-ring__content {
              position: absolute;
              width: calc(100% - 2 * var(--border));
              height: calc(100% - 2 * var(--border));
              background: #274875;
              border-radius: 50%;
              top: var(--border);
              left: var(--border);
              display: flex;
              align-items: center;
              justify-content: center;
              font-family: Arial;
              color: #44e1ff;
              font-size: 24px;
            }
          }
        }

        >.right {
          max-width: calc(50% - 20px);

          .title-con {
            margin-left: 30px;

            span {
              padding-left: 55px;
            }
          }

          .content-container {
            height: 271px;
            max-height: 40%;
          }

          .running-status {
            min-height: 227px;

            .flex {
              display: flex;
              padding: 0 20px 0 50px;
              flex-wrap: wrap;

              .common-item {
                width: 10%;
                margin-bottom: 20px;
                flex-direction: column;

                .title {
                  font-size: 14px;
                  background: linear-gradient(270deg,
                      rgba(55, 108, 186, 0.1) 0%,
                      rgba(198, 245, 255, 0.16) 100%);
                  border-radius: 6px 6px 6px 15px;
                  padding: 3px 20px 3px 10px;
                }

                .status {
                  font-size: 18px;
                  text-align: left;

                  &.yellow {
                    color: #FFEDA8;
                  }

                  &.green {
                    color: #39E9A1;
                  }

                  &.red {
                    color: #FF4836;
                  }

                  &.blue {
                    color: #64CEFF;
                  }
                }
              }
            }
          }

          .content {
            justify-content: space-between;
            padding: 10px;
            display: flex;

            .content {
              display: flex;

              flex-direction: row;

              .left {
                min-width: 30%;

                .run-status {
                  width: 100%;
                  height: 50%;
                  position: relative;
                  /* background: url(img/loading/running-bg.png); */
                  background-size: 100%;
                  background-repeat: no-repeat;

                  >img {
                    position: absolute;
                    height: 100%;
                    left: 50%;
                    transform: translateX(-50%);
                  }

                  .inner {
                    width: 100%;
                    position: absolute;
                    height: 100%;
                    /* background: url(img/loading/normal-bg.png); */
                    background-size: 100%;
                    background-repeat: no-repeat;
                    margin: auto;
                    font-size: 20px;
                    color: #ffffff;
                    font-weight: 500;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    >img {
                      position: absolute;
                      height: 100%;
                      left: 50%;
                      transform: translateX(-50%);
                    }

                    span {
                      position: absolute;
                    }
                  }
                }

                .work-status {
                  font-size: 20px;
                  color: #ffffff;
                  margin: 10px 0;
                }

                .common-item {
                  width: 100%;
                  align-items: center;
                  justify-content: space-between;

                  .title {
                    font-size: 16px;
                  }

                  .status {
                    font-size: 7px;
                  }
                }
              }

              .center {
                width: 34%;
                min-width: 34%;
                padding: 10px 30px;
                display: flex;
                flex-direction: column;

                .position {
                  flex: 1;
                  justify-content: space-around;
                  display: flex;
                  flex-direction: column;

                  .common-item {
                    margin-top: 10px;
                    height: 45px;
                    background: url(img/loading/text-bg.png) no-repeat;
                    background-size: 100% 100%;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 40px;

                    .title,
                    .status {
                      font-size: 20px;
                      font-weight: 600;
                    }

                    .status {
                      font-size: 24px;
                    }

                    &:first-of-type {

                      .title,
                      .status {
                        color: #f16060;
                      }
                    }

                    &:nth-of-type(2) {

                      .title,
                      .status {
                        color: #f2a90e;
                      }
                    }

                    &:last-of-type {

                      .title,
                      .status {
                        color: #13e7ff;
                      }
                    }
                  }
                }
              }

              .right {
                flex: 1;
                min-width: 30%;
                display: flex;
                flex-direction: column;

                .rotate-speed {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: url(img/loading/rotate-speed.png);
                  background-size: 100%;
                  width: 95px;
                  height: 98px;
                  margin: 10px auto;
                  font-size: 28px;
                  color: #ffffff;
                }

                .common-item {
                  justify-content: space-between;
                }
              }
            }
          }
        }

      }
    }

    .tip-wrapper {
      cursor: pointer;
      position: relative;
      width: 82px;
      height: 82px;

      img {
        width: 100%;
      }
    }

    .tip-wrapper-list {
      position: absolute;
      right: 0;
      top: 0;
      /* width: 364px; */
      background: #ffffff;
      border-radius: 4px;
      z-index: 100;
      padding: 18px;
      display: none;
      z-index: 9;
    }

    #tip-wrapper-list-content {
      max-height: calc(100vh - 400px);
      overflow-y: auto;
    }

    .tip-wrapper-list-item {
      width: 364px;
      height: 31px;
      line-height: 31px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 5px;
      font-weight: 400;
      font-size: 16px;
      color: #00173a;
      text-align: left;
      font-style: normal;
      margin-bottom: 10px;
      position: relative;
      padding: 0 10px 0 26px;

      &::before {
        position: absolute;
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        left: 8px;
      }


      &.alarm1 {
        background: #fdf7f3;

        &::before {
          background: #FF6310;
        }
      }

      &.alarm2 {
        background: #fdf4f4;

        &::before {
          background: #e6736f;
        }
      }

      &.alarm3 {
        background: #fcfaf3;

        &::before {
          background: #CCAE27;
        }
      }
    }

    .space {
      width: 100%;
      height: 10px;
    }
  }

  @keyframes blink {

    0% {
      opacity: 0.3;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0.3;
    }
  }

  @media screen and (max-width: 1600px) {
    #blankin-station {

      .bar-item {
        font-size: 20px;
      }

      .title-con {
        font-size: 22px;
      }

      .common-item {
        .title {
          font-size: 16px;
        }

        .status {
          font-size: 20px;
        }
      }

      .bottom {
        max-height: calc(70% - 170px);
        min-height: 70%;

        .center .position {
          .common-item {
            padding: 0 20px !important;
          }

          .title {
            font-size: 14px !important;
          }

          .status {
            font-size: 18px !important;
          }
        }

        .left-content,
        .right-content {
          padding-bottom: 0 !important;
        }

        >.right {
          .content {
            >.left {
              .common-item {
                .title {
                  font-size: 13px !important;
                }

                .status {
                  font-size: 16px !important;
                }
              }
            }

            >.right {
              .common-item {
                .title {
                  font-size: 14px !important;
                }

                .status {
                  font-size: 18px !important;
                }
              }
            }

            .work-status {
              font-size: 16px !important;
            }

            >.center {
              padding: 10px !important;
            }
          }
        }

        >.left {
          & .common-item {
            .title {
              font-size: 13px !important;
            }

            .status {
              font-size: 16px !important;
            }
          }
        }
      }
    }
  }
</style>
<style>
  body,
  html {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
</style>